<template>
  <!-- ref   v-model   .sync -->
  <!-- 权限列表数据展示
         1：导入权限列表api
         2:进入页面调用api获取数据
         3：将数据转换成树形结构
         4：存储并渲染数据

     el-tree默认选中
        实际使用：el-tree可能页面都还没渲染，我就已拿到数据，需要默认选中时就可优先使用default-checked-keys
         特点：它的值会累加选中
        1：设置node-key="数据唯一标识 的字段名，一般都是id"
        2:配制 default-checked-keys=[唯一标识的值]
     通过el-tree内部提供的方法getCheckedKeys/setCheckedKeys分别用于获取与设置对应的选中
          1：el-tree绑定一个ref="tree"  el-tree设置node-key="数据唯一标识 的字段名，一般都是id"
          2:获取：this.$refs.tree.getCheckedKeys()
          3:设置：this.$refs.tree.setCheckedKeys(['需要选中项的id值'])

       check-strictly:el-tree选择时父子是否关联
       实现默认选中：
         1：定义api（获取角色详情数据api）
         2:导入
         3：定义一个方法用于获取角色的权限数据
         4：父组件点击打开弹框时触发方法
         5：渲染数据

       接口提交权限修改
         1：定义接口
         2：导入
         3：点击确定时调用
         4：调用成功
            a:提示
            b:清空选择
            c:关闭弹框
   -->
  <el-dialog title="分配权限" :visible="isShow" @close="showSeag">
    <el-tree
      ref="tree"
      :data="list"
      show-checkbox
      node-key="id"
      check-strictly
      :props="{ label: 'name' }"
      :default-checked-keys="defaultChecked"
    />
    <template #footer>
      <div style="text-align:center">
        <el-button type="primary" @click="subtila">确定</el-button>
        <el-button @click="showSeag">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { sysPermissIon } from '@/api/permission'
import { changeData } from '@/utils/index'
import { sysRoleId, sysroleassignPrem } from '@/api/setting'
export default {
  props: {
    isShow: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      list: [],
      defaultChecked: [],
      id: ''
    }
  },
  created () {
    this.getData()
  },
  methods: {
    // 关闭弹框处理
    showSeag () {
      this.$emit('update:isShow', false)
      this.$refs.tree.setCheckedKeys([])
    },
    async getData () {
      const res = await sysPermissIon()
      this.list = changeData(res.data.data, '0')
      console.log(res)
    },
    //  定义方法获取角色详情
    async getRoleDetail (id) {
      this.id = id
      const res = await sysRoleId(id)
      this.defaultChecked = res.data.data.permIds
      console.log('获取角色详情', res)
    },
    // 确定事件
    async subtila () {
      await sysroleassignPrem({
        id: this.id,
        permIds: this.$refs.tree.getCheckedKeys()
      })
      //  关闭弹框并提示
      this.$message.success('分配权限成功')
      this.showSeag()
    }
  }
}
</script>

<style></style>
